<template>
  <!-- 富文本控件 -->
  <div class="form-components" :style="{...newStyle,scale:'none'}">
    <template v-if="!$attrs.onlyShow">
      <div v-if="readonly" class="form-readonly"></div>
      <div v-if="disabled" class="form-disabled"></div>
      <RichEditor
        v-if="!loading"
        class="el-textarea"
        v-model="dataValue"
        :readonly="readonly || disabled"
        :placeholder="placeholder"
        :maxlength="maxlength"
        :height="height"
        :transcoding="transcoding"
        @input="changeValue"
        @blur="onBlur"
        @focus="onFocus"
      />
    </template>
    <div v-else v-rich-text="value" class="rich-text-show"></div>
  </div>
</template>
<script>
// 富文本
import RichEditor from "@/plugins/richEditor/richEditorPc";
import { comMixin } from "../../../utils/comMixins";
export default {
  mixins: [comMixin],
  name: "form-rich-text",
  components: {
    RichEditor,
  },
  model: {
    prop: "value", // 绑定的值，通过父组件传递
    event: "update",
  },
  props: {
    // 绑定的输入值
    value: {
      default: "",
    },

    // 是否只读
    readonly: {
      type: Boolean,
      default: false,
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    // 占位语
    placeholder: {
      type: String,
      default: "请输入",
    },
    // 最大输入长度
    maxlength: {
      type: String,
      default: "20000",
    },
    height: {
      type: [String, Number],
      default: "",
    },
    // 是否开启转码
    transcoding: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      dataValue: this.value,
      loading: false,
    };
  },
  computed: {
    // 需要监听变化的数据
    changeObj() {
      return {
        maxlength: this.maxlength,
        placeholder: this.placeholder,
        disabled: this.disabled,
        readonly: this.readonly,
      };
    },
  },

  watch: {
    // 监听数据的变化
    value: {
      handler(nd, od) {
        if (nd !== this.dataValue) {
          this.dataValue = nd;
        }
      },
    },
    changeObj: {
      handler(nd, od) {
        if (JSON.stringify(nd) != JSON.stringify(od)) {
          this.loading = true;
          this.$nextTick(() => {
            this.loading = false;
          });
        }
      },
    },
  },
  methods: {
    // 数据变化就传递更新
    changeValue(val) {
      this.$emit("update", val);
      this.$emit("input", val);
      this.onInput(val);
    },
  },
};
</script>

<style lang="scss">
</style>
